<!DOCTYPE html>
<html>

<head>
<title>GramLab Corpus Manager</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/common.css"
	media="screen" />
<link href="css/fileuploader.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui-1.10.2.custom.css" rel="stylesheet"
	type="text/css">
<link href="css/jquery-ui-1.10.2.custom.min.css" rel="stylesheet"
	type="text/css">


<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.2.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="js/glabCorpus.js"></script>
<script type="text/javascript" src="js/core/Core.js"></script>

<script type="text/javascript" src="js/core/AbstractManager.js"></script>
<script type="text/javascript" src="js/managers/Manager.jquery.js"></script>
<script type="text/javascript" src="js/core/Parameter.js"></script>
<script type="text/javascript" src="js/core/ParameterStore.js"></script>
<script type="text/javascript" src="js/core/AbstractWidget.js"></script>
<script type="text/javascript" src="js/core/AbstractFacetWidget.js"></script>

<script type="text/javascript" src="js/widgets/ResultWidget.js"></script>
<script type="text/javascript" src="js/glabCorpus.theme.js"></script>
<script type="text/javascript" src="js/helpers/jquery/ajaxsolr.theme.js"></script>

<script type="text/javascript" src="js/jquery.livequery.js"></script>
<script type="text/javascript" src="js/widgets/jquery/PagerWidget.js"></script>
<script type="text/javascript" src="js/widgets/CurrentSearchWidget.js"></script>
<script type="text/javascript" src="js/core/AbstractFacetWidget.js"></script>
<script type="text/javascript" src="js/widgets/TextWidget.js"></script>
<script type="text/javascript" src="js/widgets/TagCloudWidget.js"></script>
<script type="text/javascript" src="js/widgets/CalendarWidget.js"></script>

<script src='js/jquery.form.js' type="text/javascript"></script>
<script src='js/jquery.MetaData.js' type="text/javascript"></script>
<script src='js/jquery.MultiFile.js' type="text/javascript"></script>
<script src='js/jquery.blockUI.js' type="text/javascript"></script>
<script src="js/fileuploader.js" type="text/javascript"></script>



<script>
	$(document).ready(function() {
		
		$("#add-url-img").click(function() {
			add_url();
		});
	});

	function createUploader() {
		var uploader = new qq.FileUploader({
			element : document.getElementById('file-uploader'),
			action : 'Commonsfileuploadservlet',
			allowedExtensions : [ 'pdf', 'txt', 'odt', 'doc', 'docx', 'rtf',
					'zip', 'ppt', 'htm', 'html', 'php', 'jsp' ],
			onComplete : function() {
				Manager.doRequest();
			}
		});
	}
	
	function remove_url(id) {
		$('#url' + id).remove();
		$('#brurl' + id).remove();
		$('#actionurl' + id).remove();
	};
	
	function add_url() {
		var i = 0;
		var element = $('#url' + i)[0];
		while (element) {
			i++;
			element = $('#url' + i)[0];
		}

		var txt = '<br id="brurl'+i+'"/> <input type="text" id="url'+i+'" name="url'+i+'" /><a href="#" id="actionurl'+i+'" onclick="remove_url(\''+i+'\')"><img src="img/textfield_delete.png" /></a>';
		jQuery('#url').append(txt);
	};

	

	function checkURL(value) {
		var urlregex = new RegExp(
				"^(http:\/\/|http:\/\/www.|https:\/\/www.|ftp:\/\/www.|www.){1}([0-9A-Za-z]+\.)");
		if (urlregex.test(value)) {
			return (true);
		}
		return (false);
	};

	function uploadUrl() {
		$('#url :input')
				.each(
						function() {
							var value = this.value;
							if (!checkURL(value)) {
								$('#url').append("<span>Can not crawl : " + value +"</span><br/>" );
								$('#' + this.id).remove();
								$('#br' + this.id).remove();
								$('#action' + this.id).remove();
							} else {
								$('#' + this.id).hide();
								$('#action' + this.id).remove();
								$('#br' + this.id).remove();
								$('#url')
										.append(
												'<br id="br' + this.id+ '"/><span>'
														+ value
														+ '</span><img class="url-loading" src="img/loading.gif" />');
							}
						});
		var dataString = $('#url :input');
		$.ajax({
		    type: "POST",
		    url: "Urluploadservlet",
		    data: dataString,
		    success: function(data) {
		    	$('.url-loading').each(function(){
		    		$(this).attr("src","img/ok.png");		
		    	});
		    	$('#url :input').each(function(){
		    		$(this).remove();
		    	});
		    	Manager.doRequest();
		    }
		});
	}

	// in your app create uploader as soon as the DOM is ready
	// don't wait for the window to load  
	window.onload = createUploader;
</script>
</head>
<body>
	<div id="wrap">
		<div id="header">

			<h1>GramLab Corpus Manager</h1>
			<h2>Dowload and crawl files to create GramLab corpus</h2>
		</div>

		<div class="right">
			<div id="toolbar">
				<div id="selector">
					<input id="select_all" type="checkbox" value="all" /><span>Select
						All<span>
				</div>
			</div>
			<div id="batch_action">
				<!--<img src="img/picto/batch_load_picto.png" alt="tei" title="Download selected documents" id="batch_load_picto"/>-->
				<div id="batch">
					<span id="tei_batch_picto"><img src="img/picto/TEI_down.gif"
						alt="tei" title="download selected TEI" /></span> <span
						id="download_batch_picto"><img src="img/picto/doc.gif"
						alt="download" title="download selected files" /></span> <span
						id="delete_batch_picto"><img src="img/picto/bin.png"
						alt="download" title="delete selected files" /></span>
				</div>
			</div>
			<div id="result">
				<div id="navigation">
					<ul id="pager"></ul>
					<div id="pager-header"></div>
					<div id="selected-header"></div>
				</div>
				<div id="docs"></div>
			</div>
		</div>

		<div class="left">
			<h2>Current Selection</h2>
			<ul id="selection"></ul>

			<h2>Search</h2>
			<span id="search_help">(press ESC to close suggestions)</span>
			<ul id="search">
				<input type="text" id="query" name="query" />
			</ul>
			<h2>By language</h2>
			<div class="tagcloud" id="LANGUAGE"></div>
			<h2>By publisher</h2>
			<div class="tagcloud" id="PUBLISHER"></div>
			<!--  <h2>Author</h2>
			<div class="tagcloud" id="AUTHOR"></div>-->
			<h2>By format</h2>
			<div class="tagcloud" id="CONTENT_TYPE"></div>
			<h2>By date</h2>
			<br />
			<div id="calendar" class="hasDatepicker"></div>

			<h2>Upload Files</h2>
			<div id="file-uploader">
				<form id="uploadform" method="post" enctype="multipart/form-data"
					action="Commonsfileuploadservlet">
					<input type="file" name="images" id="images" multiple="true"
						class="multi"
						accept="pdf|txt|odt|doc|docx|rtf|zip|ppt|htm|html|php|jsp" />
					<button class="upload" type="submit" id="btn">Upload
						Files!</button>
				</form>
			</div>

			<div id="file-uploader">
				<noscript>
					<p>Please enable JavaScript to use file uploader.</p>
					<!-- or put a simple form for upload here -->
				</noscript>
			</div>

			<!-- ADD NUTCH CRAWL -->
			<h2>Crawl websites</h2>
			<div>
				<div id="add-url">
					<span> Add url <img id="add-url-img" src="img/textfield_add.png" /></span>
				</div>
				<div>
				<div id="url" class="url"></div>
				<button type="button" id="btn_url" onclick="uploadUrl()">Crawl Urls</button>
				</div>
			</div>
		</div>
	</div>
	<div class="clear"></div>




	</div>
</body>
</html>
